<template>
    <div class="content">
      <!-- {{ form }} -->
      <TitleComponent mainTitle="内部用户" :subTitle="subTitle" />
      <div class="box">
        <div class="box_header">
          <div class="box_title">{{subTitle}}</div>
          <div class="pull-right">
            <el-button type="primary" :icon="Operation" @click="backTolist">列表</el-button>
          </div>
        </div>
        <avue-form ref="formRef" :option="option" v-model="form" @submit="handleSubmit"></avue-form>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, watchEffect } from "vue";
  import { Operation } from "@element-plus/icons-vue";
  import TitleComponent from '@/components/title/index.vue';
  import { useRouter,useRoute } from 'vue-router';
  
  // 外部传递的列定义数组
  
  // 路由带参数过来
  
  /**
   * 列定义数组示例
   * 每个对象表示一个表单字段的定义
   *
   * @typedef {Object} ColumnDefinition
   * @property {string} label - 列标题
   * @property {string} prop - 对应的数据属性名
   * @property {string} [type] - 输入类型，默认为文本输入
   * @property {number} [step] - 步长（如果适用于数值类型）
   * @property {boolean} [stepStrictly] - 数值
   * @property {number} [offset] - 布局偏移量
   * @property {number} [span] - 栅格占据的列数
   * @property {boolean} [row] - 是否单独一行显示
   * @property {number} [min] - 输入值的最小限制
   * @property {string} [listType] - 上传图片时使用的图片类型
   */
  
  
  // 跳转路由
  const router = useRouter();
  const route = useRoute();
  const subTitle = ref("创建");
  
  const backTolist = () => {
    router.push('/user/internalUsers');
  }
  
  const externalColumns = ref([
    {
      label: "代理编号",
      prop: "AgentNumber",
      type: "input",
      step: 1,
      stepStrictly: true,
      offset: 4,
      span: 6,
      row: true,
      min: 0,
    },
    {
      label: "上级编号",
      prop: "SuperiorNo",
      type: "input",
      step: 1,
      stepStrictly: true,
      offset: 4,
      span: 6,
      row: true,
      min: 0,
    },
    {
      label: "用户昵称",
      prop: "name",
      offset: 4,
      row: true,
      rules: [
        {
          required: true,
          message: '输入用户昵称',
          trigger: 'blur',
        },
      ],
    },
    {
      label: "用户手机号",
      prop: "phone",
      offset: 4,
      labelWidth: '10px',
      span: 24,
      row: true,
      rules: [
        {
          required: true,
          message: '输入用户手机号',
          trigger: 'blur',
        },
      ],
    },
    {
      label: "等级",
      prop: "Level",
      type: "select",
      filterable: true,
      offset: 4,
      row: true,
      dicData: [
        { label: 'VIP1', value: 1 },
        { label: 'VIP2', value: 2 },
        { label: 'VIP3', value: 3 }
      ],
    },
    {
      label: "密码",
      prop: "password",
      type: "password",
      offset: 4,
      row: true,
    },
    {
      label: "安全密码",
      prop: "securityPassword",
      type: "password",
      offset: 4,
      row: true,
    },
    {
      label: "头像",
      prop: "avatar",
      type: "upload",
      listType: "picture-img",
      offset: 4,
      row: true,
    },
    {
      label: "禁止提现",
      prop: "disableWithdrawal",
      type: "switch",
      offset: 4,
      row: true,
      value: 0,
    },
    {
      label: "禁用用户",
      prop: "disableUser",
      type: "switch",
      offset: 4,
      row: true,
      value: 0,
    },
    {
      label: "创建时间",
      prop: "createtime",
      offset: 4,
      row: true,
      value: new Date().toISOString().slice(0, 19).replace('T', ' '),
      disabled: true
    },
  ]);
  
  const form = ref({});
  const option = ref({});
  
  const handleSubmit = (formData, done) => {
    console.log(formData);
    done();
  };
  
  // 监听外部传递列定义数组的变化
  watchEffect(() => {
    option.value = {
      column: externalColumns.value.map((column) => ({
        label: column.label,
        prop: column.prop,
        type: column.type,
        listType: column.listType,
        offset: 4, // 可根据需要设置其他默认值
        row: true,
        min: column.min, //最小值
        value: column.value,
        disabled: column.disabled, // 禁用
        dicData: column.dicData,
        filterable: column.filterable,
        rules: column.rules,
        labelWidth: column.labelWidth,
        // span: column.span,
      })),
    };
  
  
  
    // 根据外部列定义动态设置表单初始值
    form.value = {};
    externalColumns.value.forEach((column) => {
      // console.log(column.prop)
      // form.value[column.prop] = ""; // 根据prop属性初始化表单值
    });
  });
  
  // 检查路由参数并调用API请求
  onMounted(() => {
    const { index } = route.query;
    if (index) {
      subTitle.value = "编辑";
      // 调用API接口获取数据
    }
  });
  
  
  </script>
  
  <style scoped>
  .content {
    background-color: #eff1f7;
  }
  
  
  .box {
    margin: 0 20px;
  }
  
  .box_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 30px; */
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f4f4f4;
    background-color: white;
  }
  
  .box_title {
    font-size: 16px;
    line-height: 30px;
  }
  
  ::v-deep .el-collapse-item__content {
    padding-top: 50px !important;
  }
  </style>
  